<template>
	<div>
		<!-- 注册弹窗start -->
		<Modal
		    v-model="isShowRegister"
		    footer-hide
		    >
		   <registerForm @on-success-valid="handleRegister"></registerForm>
		</Modal>
		<!-- 注册弹窗end -->
		
		<!-- 注册成功弹窗start -->
		<Modal
		    v-model="isShowRegisterSuccess"
		    footer-hide
		    >
		   <registerSuccess></registerSuccess>
		</Modal>
		<!-- 注册成功弹窗end -->
		
		<div class="bg_nav">
			<div class="title_nav">
				<div class="title">内容营销服务平台</div>
				<span>多平台矩阵玩法，自有组合快速助力品牌实现销售目标</span>
				<div class="btn" @click="handleLogin">免费试用</div>
			</div>
			<div class="mac_nav" id="mac_nav">
				<div class="top">
					<img src="@/assets/01/省略号.png" alt="">
				</div>
				<div class="center">
					<div class="center_list" :style="{'width':(width*list.length)+'px','transform':'translate3d(-'+(active*width*3)+'px,0px,0px)'}">
						<div class="item" :id="'item'+index" v-for="(item,index) in list" :key="index">
							<img :src="item.icon" alt="">
							<span>{{item.title}}</span>
							<span>{{item.desc}}</span>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div @click="selectTab(index)" v-for="(item,index) in tabList" :key="index" :style="{'background':active==index?'#fff':'#a8add5','color':active==index?'#a8add5':'#fff'}">{{item.title}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
//引入vue-awesome-swiper
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper' 
	import '@/assets/css/saleService.css'
	import animated from 'animate.css'
	import registerForm from '../Login/register-form.vue';
	import registerSuccess from '../Login/registerSuccess.vue';
	export default {
		name: 'saleService',
		components:{
			registerForm,
			registerSuccess
		},
		data() {
			return {
				isShowRegister:false,
				isShowRegisterSuccess:false,
				width: 0,
				active: 0,
				list: [{
					icon: require('@/assets/01/saleService/1_1.png'),
					title: '内容策划',
					desc: '品牌产品/关键词数据分析+内容投放方向策划'
				}, {
					icon: require('@/assets/01/saleService/1_2.png'),
					title: '品牌种草',
					desc: '垂直领域KOL话题扩散+海量KOL原创铺量'
				}, {
					icon: require('@/assets/01/saleService/1_3.png'),
					title: '全域推广',
					desc: '小红书/抖音/微博等热门社媒平台一站式推广'
				}, {
					icon: require('@/assets/01/saleService/2_1.png'),
					title: '图文制作',
					desc: '精美图片拍摄+高质量软文创作'
				}, {
					icon: require('@/assets/01/saleService/2_2.png'),
					title: '视频制作',
					desc: '专业短视频团队制作原创内容'
				}, {
					icon: require('@/assets/01/saleService/2_3.png'),
					title: '内容策划',
					desc: '图文&短视频内容组合定制方案'
				}, {
					icon: require('@/assets/01/saleService/3_1.png'),
					title: '抖音小店',
					desc: '定向管理抖音小店/企业抖音号代运营'
				}, {
					icon: require('@/assets/01/saleService/3_2.png'),
					title: '巨量鲁班',
					desc: '巨量鲁班专业数据分析推广+智投'
				}, {
					icon: require('@/assets/01/saleService/3_3.png'),
					title: '抖音带货',
					desc: '抖音KOL专场直播+KOC私域扩散传播'
				}],
				tabList: [
					{title: '营销解决方案',},
				 	{title: '内容创作服务',}, 
				 	{title: '抖音深度合作',}
				 ],
				height: document.body.clientHeight || document.documentElement.clientHeight
			}
		},
		methods: {
			handleRegister(){
				this.isShowRegister=false;
				this.isShowRegisterSuccess=true;
			},
			selectTab(e) {
				this.active = e
			},
			pageResize() {
				this.height = document.body.clientHeight || document.documentElement.clientHeight
				this.width = document.getElementById('mac_nav').offsetWidth / 3
			},
			_isMobile() {
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
				return flag;
			},
			handleLogin() {
				if (this._isMobile()) {
					
					this.isShowRegister=true;//打开注册
					
				} else {
					let channel = sessionStorage.getItem('channel')
					if (channel) {
						window.open('https://cloud.redsay.net/login/1?channel=' + channel)
					} else {
						window.open('https://cloud.redsay.net/login/1?channel=100')
					}
					return
				}
			},

		},
		created() {},
		mounted() {
			var that = this
			this.width = document.getElementById('mac_nav').offsetWidth / 3
			window.onresize = () => {
				//调用methods中的事件
				that.pageResize();
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>